
<template>
  <div 
    class="group cursor-pointer bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
    @click="$emit('click')"
  >
    <!-- 图片区域 -->
    <div class="relative overflow-hidden rounded-t-2xl">
      <div class="aspect-square bg-gradient-to-br from-qinghua-blue to-qinghua-light">
        <!-- 占位符，实际项目中替换为真实图片 -->
        <div class="w-full h-full flex items-center justify-center">
          <div class="text-white text-center">
            <i class="fas fa-cube text-6xl mb-2 opacity-50"></i>
            <p class="text-sm opacity-75">{{ doll.name }}</p>
          </div>
        </div>
      </div>
      
      <!-- 稀有度标签 -->
      <div class="absolute top-4 right-4">
        <span 
          :class="rarityClass"
          class="px-3 py-1 rounded-full text-xs font-semibold"
        >
          {{ doll.rarity }}
        </span>
      </div>
      
      <!-- 悬停效果 -->
      <div class="absolute inset-0 bg-qinghua-blue bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center">
        <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <i class="fas fa-eye text-white text-2xl"></i>
        </div>
      </div>
    </div>
    
    <!-- 信息区域 -->
    <div class="p-6">
      <h3 class="text-xl font-bold text-qinghua-blue mb-2">{{ doll.name }}</h3>
      <p class="text-qinghua-gray text-sm mb-4">{{ doll.description }}</p>
      
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-qinghua-blue">¥{{ doll.price }}</span>
        <button class="bg-qinghua-blue text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-opacity-90 transition-colors">
          查看详情
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  doll: {
    type: Object,
    required: true
  }
})

defineEmits(['click'])

const rarityClass = computed(() => {
  const rarityMap = {
    '限量': 'bg-red-500 text-white',
    '珍藏': 'bg-yellow-500 text-white',
    '普通': 'bg-gray-500 text-white'
  }
  return rarityMap[props.doll.rarity] || 'bg-gray-500 text-white'
})
</script>
